<template id="app"> <!-- vue实例外创建 -->
  <div>
    <div class="content">
      <div v-for="item in comment" :key="item.commentId" class="comment-item">
        <div class="comment-user">
          <img :src="item.user.avatarUrl" alt="用户头像" class="user-avatar">
          <span class="user-name">{{ item.user.nickname }}</span>
        </div>
        <div class="comment-content">
          {{ item.content }}
        </div>
        <div class="comment-time">
          {{ formatTime(item.time) }}
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 调用   <mycom></mycom> -->
<script>
import { MusicComment } from '../api/comment'
export default {
  data() {
    return {
      id: '',
      comment: [],
    }
  },
  methods: {
    async Getcomment() {
      let res = await MusicComment({
        id: this.id,
        limit: 20,
        offset: 0
      })
      this.comment = res.comments
      console.log(this.comment)
    },
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
  },
  mounted() {
    this.id = this.$route.query.id
    console.log(this.id)
    this.Getcomment()
  }
}
</script>

<style scoped>
.comment-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-size: 14px;
  color: #666;
}

.comment-content {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.comment-time {
  font-size: 12px;
  color: #999;
}
</style>